"use strict";
var _a, _b, _c, _d, _e;
/**
 * 传入歌词字符串解析为数组
 */
function parseLrc(lrc) {
    const result = []; // 存放歌词信息的数组
    lrc.split('\n').forEach((value) => {
        const [timeStr, word] = value.split(']');
        const time = parseTime(timeStr.substring(1));
        const obj = { time, word };
        result.push(obj);
    });
    return result;
}
/**
 * 传入字符串时间 解析为 所花费的秒数
 * @param string 02:36.400
 * @returns
 */
function parseTime(timeStr) {
    return +timeStr.split(':')[0] * 60 + (+timeStr.split(':')[1]);
}
/**
 * 计算出，在当前播放器播放到第几秒的情况下
 * lrcData数组，应该高亮显示的歌词下标
 */
function findIndex() {
    var _a;
    const curTime = (_a = doms.audio) === null || _a === void 0 ? void 0 : _a.currentTime;
    let index = 0;
    lrcData.forEach((value, idx) => {
        if (curTime > value.time) {
            index = idx - 1;
        }
    });
    return index;
}
/**
 * 创建 歌词元素 li
 */
function createLrcElements() {
    var _a;
    const frag = document.createDocumentFragment();
    lrcData.forEach((value) => {
        if (value.word) {
            const li = document.createElement('li');
            li.textContent = value.word;
            frag.appendChild(li);
        }
    });
    (_a = doms.ul) === null || _a === void 0 ? void 0 : _a.appendChild(frag);
}
/**
 * 设置 ul元素 的偏移量
 */
function setOffset() {
    var _a, _b, _c;
    const index = findIndex();
    let offset = (liHeight * index) + liHeight / 2 - containerHeight / 2;
    console.log(offset);
    if (offset < 0) {
        offset = 0;
    }
    if (offset > maxHeight) {
        offset = maxHeight;
    }
    doms.ul.style.transform = `translateY(-${offset}px)`;
    // 移除之前的 active
    if ((_a = doms.ul) === null || _a === void 0 ? void 0 : _a.querySelector('.active')) {
        (_c = (_b = doms.ul) === null || _b === void 0 ? void 0 : _b.querySelector('.active')) === null || _c === void 0 ? void 0 : _c.classList.remove('active');
    }
    doms.ul.children[index].classList.add('active');
}
const doms = {
    audio: document.querySelector('audio'),
    ul: document.querySelector('ul'),
    container: document.querySelector('.container')
};
const lrcData = parseLrc(lrc);
createLrcElements();
// 容器高度
const containerHeight = (_a = doms.container) === null || _a === void 0 ? void 0 : _a.clientHeight;
// 最大高度
const maxHeight = ((_b = doms.ul) === null || _b === void 0 ? void 0 : _b.clientHeight) - containerHeight;
// ul下的 子元素 li高度
const liHeight = (_c = doms.ul) === null || _c === void 0 ? void 0 : _c.children[0].clientHeight;
console.log((_d = doms.ul) === null || _d === void 0 ? void 0 : _d.clientHeight);
(_e = doms.audio) === null || _e === void 0 ? void 0 : _e.addEventListener('timeupdate', setOffset);
setOffset();
